<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-present" ></i> 
        产品类别
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>{{jiahuogai}}</el-breadcrumb-item>
    </el-breadcrumb>
    <header>
      <div><i class="el-icon-arrow-left" @click="gotop" ></i></div>
      <h3>{{jiahuogai}}</h3>
    </header>
    <div id="tijiao">
      <!-- 添加 -->
      <el-form ref="form" :model="form" label-width="100px" :rules="rules" :inline="true" v-if="a==0" >
        <el-form-item label="活动名称:"  style="width:100%"   prop="name">
          <el-input v-model="form.name" style="width:calc(100vh - 100px);" placeholder="输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="简略标题:" style="width:100%">
          <el-input v-model="form.title" style="width:calc(100vh - 100px);" placeholder="输入标题"></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="form.px" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="库 存：">
          <el-input v-model="form.inventory" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="分 类：">
          <el-select v-model="form.fenlei" placeholder=" ">
            <el-option label="冠心病" value="shanghai"></el-option>
            <el-option label="脑血管疾病" value="beijing"></el-option>
            <el-option label="感冒药" value="beijing"></el-option>
            <el-option label="咳嗽药" value="beijing"></el-option>
            <el-option label="失眠" value="beijing"></el-option>
            <el-option label="帕金森" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="净含量：">
          <el-input v-model="form.kg" placeholder="请输入(kg)"></el-input>
        </el-form-item>
        <el-form-item label="品 牌">
          <el-select v-model="form.logo" placeholder="请选择">
            <el-option label="恒瑞医药" value="shanghai"></el-option>
            <el-option label="复星医药" value="beijing"></el-option>
            <el-option label="药明康德" value="beijing"></el-option>
            <el-option label="凯莱英" value="beijing"></el-option>
            <el-option label="迈瑞医疗" value="beijing"></el-option>
            <el-option label="长春高新" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词:"  style="width:100%">
          <el-input v-model="form.text" style="width:calc(100vh - 100px);" placeholder="以逗号分开，最多5个"></el-input>
        </el-form-item>
        <el-form-item label="功效:"  style="width:100%">
          <el-input v-model="form.efficacy" style="width:calc(100vh - 100px);" placeholder="请输入药品功效"></el-input>
        </el-form-item>
        <el-form-item label="药品价格：">
          <el-input v-model="form.pice" placeholder="请入 (元)"></el-input>
        </el-form-item>
        <el-form-item label="原价：">
          <el-input v-model="form.ypice" placeholder="请入 (元)"></el-input>
        </el-form-item>
        <el-form-item label="成本价：">
          <el-input v-model="form.cbpice" placeholder="请入 (元)"></el-input>
        </el-form-item>
        <el-form-item label="已出售:"  style="width:100%">
          <el-input placeholder="请输入内容"  v-model="form.mSale" >
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="图片上传:"  style="width:100vh">
          <el-upload
            action="http://127.0.0.1:7001/upload"
            list-type="picture-card"
            :on-success="ok">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible"  append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="规格:"  >
          <el-input v-model="shuliang" placeholder="输入数量"></el-input>
        </el-form-item>
         <el-form-item>
          <el-select v-model="danwei" placeholder="请选择单位">
            <el-option label="包" value="包"></el-option>
            <el-option label="粒" value="粒"></el-option>
            <el-option label="胶囊" value="胶囊"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品详情:"  style="width:100%;">
          <el-input type="textarea" v-model="form.detail" style="width:calc(100vh - 100px);"></el-input>
        </el-form-item>
        <el-form-item style="width:100%;display:flex;justify-content: center;">
          <el-button type="primary" @click="onSubmit">保存并上架</el-button>
          <el-button type="primary" @click="onSubmit">保存到库存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 修改 -->
      <el-form ref="form" :model="form" label-width="100px" :rules="rules" :inline="true" v-else >
        <el-form-item label="活动名称:"  style="width:100%"   prop="name">
          <el-input v-model="form.name" style="width:calc(100vh - 100px);" :placeholder="list.name"></el-input>
        </el-form-item>
        <el-form-item label="简略标题:" style="width:100%">
          <el-input v-model="form.title" style="width:calc(100vh - 100px);" :placeholder="list.title"></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="form.px" :placeholder="list.px"></el-input>
        </el-form-item>
        <el-form-item label="库 存：">
          <el-input v-model="form.inventory" :placeholder="list.inventory"></el-input>
        </el-form-item>
        <el-form-item label="分 类：">
          <el-select v-model="form.fenlei" :placeholder="list.fenlei">
            <el-option label="脑血管疾病" value="脑血管疾病"></el-option>
            <el-option label="感冒药" value="感冒药"></el-option>
            <el-option label="咳嗽药" value="咳嗽药"></el-option>
            <el-option label="失眠" value="失眠"></el-option>
            <el-option label="帕金森" value="帕金森"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="净含量：">
          <el-input v-model="form.kg" :placeholder="list.kg"></el-input>
        </el-form-item>
        <el-form-item label="品 牌">
          <el-select v-model="form.logo" :placeholder="list.logo">
            <el-option label="恒瑞医药" value="恒瑞医药"></el-option>
            <el-option label="复星医药" value="复星医药"></el-option>
            <el-option label="药明康德" value="药明康德"></el-option>
            <el-option label="凯莱英" value="凯莱英"></el-option>
            <el-option label="迈瑞医疗" value="迈瑞医疗"></el-option>
            <el-option label="长春高新" value="长春高新"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词:"  style="width:100%">
          <el-input v-model="form.text" style="width:calc(100vh - 100px);" :placeholder="list.text"></el-input>
        </el-form-item>
        <el-form-item label="功效:"  style="width:100%">
          <el-input v-model="form.efficacy" style="width:calc(100vh - 100px);" :placeholder="list.efficacy"></el-input>
        </el-form-item>
        <el-form-item label="药品价格：">
          <el-input v-model="form.pice" :placeholder="list.pice"></el-input>
        </el-form-item>
        <el-form-item label="原价：">
          <el-input v-model="form.ypice" :placeholder="list.ypice"></el-input>
        </el-form-item>
        <el-form-item label="成本价：">
          <el-input v-model="form.cbpice" :placeholder="list.cbpice"></el-input>
        </el-form-item>
        <el-form-item label="已出售:"  style="width:100%">
          <el-input :placeholder="shou"  v-model="form.mSale" >
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="图片上传:"  style="width:100vh">
          <el-upload
            action="http://127.0.0.1:7001/upload"
            list-type="picture-card"
            :on-success="ok">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible"  append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="规格:"  >
          <el-input v-model="shuliang" :placeholder="shu"></el-input>
        </el-form-item>
         <el-form-item>
          <el-select v-model="danwei" :placeholder="dan">
            <el-option label="包" value="包"></el-option>
            <el-option label="粒" value="粒"></el-option>
            <el-option label="胶囊" value="胶囊"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品详情:"  style="width:100%;">
          <el-input type="textarea" v-model="form.detail" style="width:calc(100vh - 100px);" :placeholder="list.text"></el-input>
        </el-form-item>
        <el-form-item style="width:100%;display:flex;justify-content: center;">
          <el-button type="primary" @click="onSubmit">保存并上架</el-button>
          <el-button type="primary" @click="onSubmit">保存到库存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    
  </div>
</template>

<script>
import { getZwyShopListBx, postzwyShopListAdd, putzwyShopListUpdate } from '@/utils/api';
export default {
  data(){
    return{
      a:0,
      jiahuogai:'添加商品',
      list:{},
      form: {
        name: '',
        title: '',
        px: '',
        inventory: '',
        fenlei: '',
        kg: '',
        logo: '',
        text: '',
        efficacy: '',
        pice: '',
        ypice: '',
        cbpice: '',
        mSale: '',
        img:'',
        specs: '',
        detail: '',
        surplus:'',
        pills:'',
        Audit:'',
        type:'',
        time:''
      },
      shuliang:'',
      danwei:'',
      shu:'',
      dan:'',
      shou:'',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods:{
    onSubmit() {
      if(this.a==0){
        console.log('submit!');
        this.form.specs = this.shuliang+this.danwei
        this.form.Audit = '通过'
        this.form.type = '出售中'
        function getNowFormatDate() {
          let date = new Date(),
            year = date.getFullYear(), //获取完整的年份(4位)
            month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
            strDate = date.getDate() // 获取当前日(1-31)
          if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
          if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
          return `${year}-${month}-${strDate}`
        }
        this.form.type = getNowFormatDate()
        if (Math.floor(Math.random() * 2)>0) {
          this.form.pills = '是'
        }else{
          this.form.pills = '否'
        }
        console.log(this.form.pills);
        if(this.form.inventory-this.form.mSale>0){
          this.form.surplus = this.form.inventory-this.form.mSale 
          this.form.mSale = this.form.mSale+'件'
          postzwyShopListAdd(this.form)
          this.$alert('保存成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push('/shop/list')
            }
          });
        }else{
          alert('库存不足')
        }
      }else{
        console.log('submit!');
        this.form.specs = this.shuliang+this.danwei
        this.form.Audit = '通过'
        this.form.type = '出售中'
        if (Math.floor(Math.random() * 2)>0) {
          this.form.pills = '是'
        }else{
          this.form.pills = '否'
        }
        this.form.surplus = this.form.inventory-this.form.mSale 
        this.form.mSale = this.form.mSale+'件'
        const obj = _.pickBy({...this.form})
        console.log(this.form);
        putzwyShopListUpdate({...obj ,id:this.a})
        this.$alert('修改成功', '成功', {
          confirmButtonText: '确定',
          callback: action => {this.$router.push('/shop/list')}
        });
      }
      
    },
    handleRemove(file) {
        console.log(file);
    },
    ok(file,list) {
      const obj = file.data.replaceAll('\\\\', '\\/')
      const http = "http://127.0.0.1:7001" + obj
      const imghttp = http.replaceAll("\\","\/")
      this.form.img = imghttp
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    gotop(){
      this.$router.go(-1)
    },
  },
  created(){
    // console.log(this.$route.params);
    if(this.$route.params.id>0){
      this.a = this.$route.params.id
      this.jiahuogai = '修改商品'
      getZwyShopListBx().then(res=>{
        let bb = res.data.data.filter(item=>item.id == this.$route.params.id)[0]
        this.list = bb
        this.shou=bb.mSale.slice(0,bb.mSale.length-1)
        this.shu=bb.specs.replace(/[^\d]/g, " ");
        this.dan=bb.specs.match(/[\u4e00-\u9fa5]/g).join("");
      })
    }
  },
  
}
</script>

<style scoped>
header{
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color:rgba(185, 182, 182, 0.5);
  display: flex;
  margin-top:10px ;
  margin-bottom:10px ;
}
header div{
  width: 3%;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
}
#tijiao{
  width: 80%;
  height: 100%;
  margin: 0 auto;
}
</style>